React 前端开发(三) - 构建虚拟数据服务 FakeAPI

发表于 2021-06-22 | 分类于计算机， JavaScript | |

JSON Server

1	npm i -g json-server

启动模拟服务

配置模拟数据文件 mock/data.json

{
  "data": [
    {
      "title": "湘潭夜跑",
      "author": "张三",
      "date": "2018年9月20日"
    },
    ...
  ]
}

启动服务

1	json-server mock/data.json -p 3003

配置反向代理, 解决跨域问题

在 package.json 文件中添加下条语句

1	"proxy": "http://localhost:3003"

请求接口数据

fetch("/data", { method: "GET" })
  .then((res) => res.json())
  .then((data) => {
    console.log(data);

    this.setState({
      news: data,
    });
  });